<template>
	<view>
		<view class="xl-info-t">
			<view :style="{color:type[infor.state].color}">{{type[infor.state].state}}</view>
			<view>{{type[infor.state].txt}}</view>
		</view>
		<view class="page">
			<view class="xb-card flex-row wx-onrow" v-if="infor.duration">
				<text>处理耗时</text>
				<text>{{infor.duration}}</text>
			</view>
			<view class="xb-card" v-if="infor.repairFee||infor.dutySharing">
				<view v-if="infor.repairFee">
					<text>维修费用（元）</text>
					<text>{{infor.repairFee}}</text>
				</view>
				<view v-if="infor.dutySharing">
					<text>报修责任</text>
					<text>{{infor.dutySharing}}</text>
				</view>
			</view>

			<view class="xb-card flex-row wx-onrow" v-if="infor.handler">
				<text>维修人员</text>
				<text>{{infor.handler}}</text>
			</view>

			<view class="xb-card">
				<view>
					<text>报修类型</text>
					<text>{{infor.repairType}}</text>
				</view>
				<view>
					<text>报修地点</text>
					<text>{{infor.repairAddress}}</text>
				</view>
				<view>
					<text>报事人</text>
					<text>{{infor.reporter}}</text>
				</view>
				<view>
					<text>联系电话</text>
					<text style="color:#44D94B;">{{infor.phone}}</text>
				</view>
				<view>
					<text>报修时间</text>
					<text>{{infor.createTime}}</text>
				</view>
				<view>
					<text>工单来源</text>
					<text v-for="(item,index) in orderSourceList" :key="index" v-if="item.dictValue==infor.orderSource">{{item.dictLabel}}</text>
				</view>
				<view>
					<text>工单编号</text>
					<text>{{infor.id}}</text>
				</view>
				<view style="display: flex;flex-direction: column;align-items: flex-start;">
					<text style="margin-bottom: 20rpx;">备注</text>
					<text>{{infor.remark}}</text>
				</view>
			</view>

			<view class="xb-card flex-row wx-onrow" v-if="infor.handlerPhone">
				<text>联系维修人员</text>
				<text style="color:#44D94B;">{{infor.handlerPhone}}</text>
			</view>

			<view class="xb-card wx-onrow" style="display: flex;flex-direction: column;align-items: flex-start;" v-if="infor.state==1">
				<text style="margin-bottom: 20rpx;">结束原因</text>
				<textarea auto-height maxlength="200" v-model="endReasonInput" placeholder="请输入最多200个字符…"></textarea>
			</view>

<!-- 			<view class="xb-card wx-onrow" style="display: flex;flex-direction: column;align-items: flex-start;">
				<text style="margin-bottom: 20rpx;">反馈评价</text>
				<textarea auto-height maxlength="200" :value="infor.replay" placeholder="请输入最多200个字符…"></textarea>
			</view>
 -->

		<!-- 	<view class="xb-card wx-onrow" style="display: flex;flex-direction: column;align-items: flex-start;">
				<text style="margin-bottom: 20rpx;">反馈评价</text>
				<text>这是一大段文案，这是一大段文案这是一大段文案这是一大段文案。</text>
			</view> -->

			<view class="xb-card wx-onrow" style="display: flex;flex-direction: column;align-items: flex-start;" v-if="infor.endReason">
				<text style="margin-bottom: 20rpx;">结束原因</text>
				<text>{{infor.endReason}}</text>
			</view>

			<view class="xb-card wx-onrow flex-row" v-if="infor.state==0">
				<text>维修费用（元）</text>
				<input type="number" v-model="infor.repairFee" placeholder="请输入维修费用" placeholder-style="font-size: 28rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #999999;line-height: 40rpx;" style="font-weight: 600;color: #44D94B;text-align: end;"/>
			</view>

			<view class="xb-card  wx-onrow" style="display: flex;justify-content: space-between;" v-if="infor.state==0">
				<text>维修人员</text>
				<view class="wxer-choose" @click="showSelectRepairer=true">
					<text v-if="repairerSelect">{{repairerSelect[0].label}}</text>
					<text v-else>请选择</text>
					<u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>
			</view>

			<view class="xb-card bxzr" v-if="infor.state==0">
				<view>报修责任</view>
				<view :class="responsibilityAc==0?'bxzr-select':''" @click="changeResponsibility(0)">个人</view>
				<view :class="responsibilityAc==1?'bxzr-select':''" @click="changeResponsibility(1)">公司</view>
			</view>

			<u-select v-model="showSelectRepairer" mode="mutil-column-auto" :list="repairerList"
				@confirm="selectRepairerFn" label-name="userName" value-name="id"></u-select>

		</view>

		<view class="wxif-btn" v-if="type[infor.state].btnTxt" @click="btnClickFn" :style="{background:type[infor.state].btnColor}">
			{{type[infor.state].btnTxt}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: [
					{state:'待处理',color:"#F74D39",btnColor:'#44D94B',txt:"请选择维修人员进行派工",btnTxt:"派工完成"},
					{state:'未缴费',color:"#FF5E00",btnColor:'#F74D39',txt:"报事人尚未缴费，请等待…",btnTxt:"结束受理"},
					{state:'已缴费',color:"#FF5E00",btnColor:'#44D94B',txt:"已缴费100元，请尽快进行维修",btnTxt:"派工维修"},
					{state:'维修中',color:"#FF5E00",btnColor:'#44D94B',txt:"维修人员正在维修，请等待反馈",btnTxt:"受理完成"},
					{state:'受理完成',color:"#44D94B",btnColor:'',txt:"工单已完成",btnTxt:""},
					{state:'结束受理',color:"#F74D39",btnColor:'',txt:"未缴费",btnTxt:""}],
				tishi: ['请选择维修人员进行派工', '报事人尚未缴费，请等待…', '已缴费，请尽快进行派修'],
				buttonText: ['派工完成', '结束受理', '派工维修', '提交评价'],
				infor: this.$store.state.repair.repairInfo,
				repairerList:[
					{
						name:'苏师傅',
						phone:'13442343545',
					},
					{
						name:'刘师傅',
						phone:'13442343545',
					},
					{
						name:'陈师傅',
						phone:'13442343545',
					}
				],
				endReasonInput:"",
				repairerSelect:null,
				showSelectRepairer:false,
				responsibilityAc: 0,
				orderSourceList:[]
			}
		},
		created() {
			this.apis.commonApi.getWyUser().then(res=>{
				this.repairerList=res.rows
			})
			this.apis.materialsApi.dictDataList({
				dictType: 'order_source'
			}).then(res => {
				this.orderSourceList = res.rows
			})

		},
		methods: {
			changeResponsibility(num) {
				this.responsibilityAc = num
			},
			selectRepairerFn(num){
				this.repairerSelect=num
				this.infor.handlerId=num[0].value
				console.log(this.infor.handlerId);
			},
			btnClickFn(){
				let data= this.$u.deepClone(this.infor);
				if(this.isEmpty(this.infor.repairFee)){
					this.showToast('请输入维修费用！')
					return
				}else if(this.infor.handlerId==""){
					this.showToast('请选择维修人员！')
					return
				}
				if(data.state==1){
					if(this.endReasonInput.replace(/^\s+|\s+$/g,"")==""){
						this.showToast('结束原因不能为空！')
						return
					}
					data.state=5
					data.endReason=this.endReasonInput
				}else{
					data.state=parseInt(data.state)+1
				}

				data.dutySharing=this.responsibilityAc==0?'个人':'公司'
				this.apis.repairApi.edit(data).then(res=>{
					if(res.code==200){
						this.apis.repairApi.getById(data.id).then(res=>{
							this.showToast(this.type[this.infor.state].btnTxt)
							this.infor=res.rows[0]
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding-bottom: 112rpx;
		font-size: 28rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #666666;
	}

	.xb-card {
		padding: 0 32rpx;
		margin-bottom: 20rpx;

		view {
			padding-top: 28rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #eee;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&:last-child {
				border: none;
			}
		}

		text:nth-child(2) {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #333333;
		}

	}

	.wx-onrow {
		justify-content: space-between;
		padding: 30rpx 32rpx;
	}

	.xl-info-t {
		margin-bottom: 20rpx;
		width: 100%;
		background-color: #fff;
		height: 160rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40rpx;

		view:nth-child(1) {
			margin-bottom: 10rpx;
			font-size: 56rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #44D94B;
			line-height: 80rpx;
		}
	}

	/deep/ .uni-textarea-wrapper {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
	}

	/deep/ .uni-textarea-placeholder {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40rpx;
	}

	textarea {
		margin-top: 20rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		min-height: 200rpx;
	}

	.wxif-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 112rpx;
		background: #44D94B;
		font-size: 34rpx;
		font-weight: 500;
		color: #FFFFFF;
		@include flexCenter;
    margin-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom)); /* window-bottom + 适配 iPhoneX */
    margin-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));
    &:after{
      position: absolute;
      content: "";
      bottom: 0;
      left: 0;
      width: 100%;
      height: 200%;
      transform: translateY(100%);
      background: #fff;
    }
	}

	// 报修责任 s
	.bxzr {
		padding: 30rpx 32rpx 0;

		view {
			padding: 0;
			font-family: PingFangSC-Regular, PingFang SC;
			font-size: 28rpx;
			border: none;
			@include flexCenter;
			font-weight: 400;
			color: #666666;
			width: 100%;
			height: 80rpx;
			background: rgba(#DDDDDD, 0.35);
			border-radius: 4rpx;
			margin-bottom: 30rpx;
		}

		view:nth-child(1) {
			height: auto;
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;
			justify-content: flex-start;
			background-color: #fff;
		}

		.bxzr-select {
			box-sizing: border-box;
			color: #44D94B;
			background: rgba(68, 217, 75, 0.1);
			border: 1rpx solid #44D94B !important;
		}
	}

	// 报修责任 e

	.wxer-choose {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		padding: 0 !important;
		color: #333333;
		view{
			padding: 0;
		}
	}
</style>
